<template>
  <div class="multiple-field-select" :class="disabled ? 'disabled' : ''">
    <div class="input" :class="status">
      <input :disabled="disabled" @focus="handleFocus" @blur="handleBlur" type="text">
      <div class="value">
        {{ valueFormat }}
      </div>
      <a-icon @click="handleClear()" class="icon clear" type="close" />
      <a-icon class="icon open" v-if="status === 'blur'" type="down" />
      <a-icon class="icon open" v-if="status === 'focus'" type="up" />

      <div class="board" id="board" :class="status === 'focus' ? 'open' : 'close'">
        <div v-for="component in options" :key="component.value" class="component">
          <div class="component-title">{{ component.label }}</div>
          <div class="field-list">
            <div
              @mousedown="handleSelect(component.value, field.value, field.id, field.filterType, field.colType, $event)"
              v-for="field in component.children"
              :key="field.value"
              class="field"
              :class="value.includes(`${component.value}/${field.value}/${field.id}/${field.filterType}/${field.colType}`) ? 'active' : itemDisabled(component.value, field.value) ? 'disabled' : '' ">
              {{ field.label }}
              <a-icon class="check" v-show="value.includes(`${component.value}/${field.value}/${field.id}/${field.filterType}/${field.colType}`)" type="check" />
            </div>
          </div>
        </div>
      </div>

    </div>


  </div>
</template>

<script >
import { mapState } from "vuex"
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    options: {
      type: Array,
      default: () => []
    },
    // 是否要求需要保证多选的组件的字段名相同
    isSameField: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      status: 'blur',
      // selectValue: undefined,
    }
  },
  methods: {
    handleClear(){
      this.value = []
      this.$emit("change", this.value)
    },
    handleFocus(){
      this.status = 'focus'
    },
    handleBlur(){
      this.status = 'blur'
    },
    handleSelect(component, field, id, filterType, colType, e){
      e.stopPropagation()
      e.preventDefault()
      const disabled = this.itemDisabled(component, field)
      if (disabled){
        return false
      }
      const newValue = `${component}/${field}/${id}/${filterType}/${colType}`
      const index = this.value.indexOf(newValue)
      if (index > -1){
        this.value.splice(index, 1)
      }
      else {
        this.value.push(newValue)
      }

      this.$emit("change", this.value)
      console.log(this.value)
    }

  },
  computed: {
    valueFormat(){
      const {
        value,
        options
      } = this
      if (options.length === 0){
        return ''
      }
      console.log(options)
      const arr = value.map(item => {
        const [componentValue, fieldValue] = item.split('/')
        // 经过转换,value可能是数字或者字符串,所以用==
        const component = options.find(option => option.value == componentValue)
        // console.log(options, item, componentValue, component)
        const componentName = component.label
        const field = component.children.find(option => option.value === fieldValue)
        const fieldName = field.label
        return `${componentName}/${fieldName}`
      })

      return arr.join(',')
    },

    itemDisabled(){
      return function (component,field) {
        const {
          isSameField,
          selectValue

        } = this

        // 是否字段名唯一
        if (isSameField){
          // 当前字段名不等于已选择字段
          return selectValue && selectValue !== field
        }
        else {
          const selectComponent = this.value.find(item => item.split('/')[0] === component)
          // console.log(selectComponent, this.value,component, field)
          // 如果当前组件没有选择字段
          if (!selectComponent){
            return false
          }
          else {
            return selectComponent.split('/')[1] !== field
          }
        }
      }
    },
    selectValue(){
       if (this.value.length > 0){
        return this.value[0].split('/')[1]
      }
      else {
        return undefined
      }
    },
  },

}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
